import { useEffect, useState } from "react";
import { Upload, Button, message } from "antd";
import { UploadOutlined } from "@ant-design/icons";
import * as uuid from "uuid";

interface fieldNamesProps {
	name?: string;
	url?: string;
}
interface TestUploadProps {
	uploadFunc?: any;
	sizeMB?: number;
	maxCount?: number;
	onChange?: any;
	fieldNames?: fieldNamesProps;
	value?: any;
}

function CommonUpload(props: TestUploadProps) {
	const {
		uploadFunc = false,
		sizeMB = 100,
		maxCount = 1,
		onChange,
		fieldNames,
	} = props;
	const [fileList, setFileList] = useState([] as any);
	const customRequest = (info: any) => {
		if (!uploadFunc) {
			setFileList([info.file]);
			return;
		}
		let formData = new FormData();
		formData.append("file", info.file);
		uploadFunc(formData).then((res: any) => {
			let newItem = {
				uid: info.file.uid,
				name: info.file.name,
				status: "done",
				url: `${window.location.origin}${res.data.path}`,
			};
			if (
				maxCount < 2 &&
				!!fieldNames &&
				!!fieldNames.name &&
				!!fieldNames.url
			) {
				let newValue: any = {};
				newValue[fieldNames.name] = newItem.name;
				newValue[fieldNames.url] = newItem.url;
				onChange(newValue);
			} else {
				onChange([newItem, ...fileList]);
			}
		});
	};
	const beforeUpload = (file: any) => {
		if (file.size > sizeMB * 2 ** 20) {
			message.error(`文件大小应该小于${sizeMB}MB`);
			return false;
		}
		return true;
	};
	const removeFile = (file: any) => {
		let newArr: any[] = fileList.filter(
			(item: any) => item.uid !== file.uid
		);
		setFileList([...newArr]);
		if (maxCount < 2) {
			onChange(undefined);
			return;
		}
		if (!!uploadFunc) {
			newArr = newArr.map((item) => {
				let obj: any = {};
				if (!!fieldNames && !!fieldNames.name && !!fieldNames.url) {
					obj[fieldNames.name] = item.name;
					obj[fieldNames.url] = item.url;
				}
				return obj;
			});

			onChange([...newArr]);
			return;
		}
		onChange(newArr);
	};
	useEffect(() => {
		if (!props.hasOwnProperty("value")) {
			return;
		}
		if (
			maxCount < 2 &&
			!!props.value &&
			!!fieldNames &&
			!!fieldNames.name &&
			!!fieldNames.url
		) {
			setFileList([
				{
					uid: uuid.v1(),
					name: props.value[fieldNames.name],
					url: props.value[fieldNames.url],
					status: "done",
				},
			]);
		} else if (Array.isArray(props.value)) {
			if (!uploadFunc) {
				setFileList([...props.value]);
				return;
			}
			let arr: any = [];
			if (!!fieldNames) {
				arr = props.value.map((item: any) => {
					return {
						uid: uuid.v1(),
						name: !!fieldNames.name && item[fieldNames.name],
						url: !!fieldNames.url && item[fieldNames.url],
						status: "done",
					};
				});
			}
			setFileList([...arr]);
		}
		// eslint-disable-next-line
	}, [props]);

	return (
		<Upload
			beforeUpload={beforeUpload}
			maxCount={maxCount}
			customRequest={customRequest}
			onRemove={removeFile}
			fileList={fileList}
		>
			<Button icon={<UploadOutlined />}>点击上传</Button>
		</Upload>
	);
}

export default CommonUpload;
